<template>
    <div id="ReportDetails">
        <report-nav :websockMsg="websockMsg" />
        <div class="report-top">
            <div class="top-left">
                <span>任务得分：</span>
                <!-- 
                <span>{{ totleScore }}</span
                ><span>=</span> <span>{{ juegeScore }}&nbsp;(判定得分)</span
                ><span>+</span>
                 -->
                
                <el-input
                    class="txt"
                    v-model="formData.score"
                    maxlength="5"
                    @input="inputjudge"
                ></el-input
                >&nbsp;(手动得分,当前任务为{{ taskScore }}分)
            </div>
            <div class="top-right">
                <div class="top-button" @click="submit">提交</div>
                <div
                    ref="last"
                    class="top-button"
                    :class="previewMatchNumber == '' ? 'disablebutton' : ''"
                    @click="changeReport('last')"
                >
                    上一份
                </div>
                <div
                    ref="next"
                    class="top-button"
                    :class="nextMatchNumber == '' ? 'disablebutton' : ''"
                    @click="changeReport('next')"
                >
                    下一份
                </div>
            </div>
        </div>
        <div class="report-main">
            <!-- 报告上方功能按钮 -->
            <div class="report-btn">
                <div class="btn-nav">
                    <div
                        :class="['nav-item', { active: activeIndex == 3 }]"
                        @click="changeNav(3)"
                    >
                        分析报告
                    </div>
                    <div
                        :class="['nav-item', { active: activeIndex == 4 }]"
                        @click="changeNav(4)"
                    >
                        查重报告
                    </div>
                    <div
                        :class="['nav-item', { active: activeIndex == 1 }]"
                        @click="changeNav(1)"
                    >
                        判定结果
                    </div>
                    <div
                        :class="['nav-item', { active: activeIndex == 2 }]"
                        @click="changeNav(2)"
                    >
                        实验过程
                    </div>
                </div>
                <div class="btn-menu">
                    <span
                        class="model-download"
                        v-if="docUrl != ''"
                        @click="pdfLookLook"
                    >
                        报告下载
                        <i class="iconfont icon-tubiaozhizuo-"></i>
                    </span>
                    <span
                        class="model-download"
                        @click="dialogManualDrag = !dialogManualDrag"
                    >
                        <i class="iconfont icon-wenben"></i>
                        任务手册
                    </span>
                    <span
                        class="model-download"
                        @click="dialogNotesDrag = !dialogNotesDrag"
                    >
                        <i class="iconfont icon-wendang1"></i>
                        参考答案
                    </span>
                </div>
            </div>
            <div class="judge-result" v-show="activeIndex == 1">
                <div v-if="judgeResultData && judgeResultData.length > 0">
                    <div
                        class="judge-item"
                        v-for="(item, index) in judgeResultData"
                        :key="index"
                    >
                        <div class="judge-row">
                            <div class="row-fields fields-title">
                                判定题目{{ index + 1 }}
                            </div>
                            <div class="row-fields">
                                (&nbsp;分数：{{ item.score }}分&nbsp;)
                            </div>
                            <div class="passed-item" v-show="item.passed">
                                <p>✔</p>
                                正确
                            </div>
                            <div class="passed-item passed-wrong" v-show="!item.passed">
                                <p>×</p>
                                错误
                            </div>
                        </div>
                        <div class="judge-row">
                            <div class="row-fields">
                                {{ item.examQuestion }}
                            </div>
                        </div>
                        <div
                            class="judge-row"
                            v-show="
                                item.studentAnswer != undefined && !item.passed
                            "
                        >
                            <div class="row-fields fields-title color-red">
                                选手输出:
                            </div>
                            <div
                                class="row-fields"
                                v-if="item.studentAnswer == ''"
                            >
                                (&nbsp;未作答&nbsp;)
                            </div>
                            <div
                                class="row-fields pre-wrap"
                                v-else
                                v-text="item.studentAnswer"
                            ></div>
                        </div>
                        <div
                            class="judge-row"
                            v-show="
                                item.studentAnswer != undefined && item.passed
                            "
                        >
                            <div class="row-fields fields-title color-green">
                                选手输出:
                            </div>
                            <div
                                class="row-fields color-green pre-wrap"
                                v-text="item.studentAnswer"
                            ></div>
                        </div>
                        <div class="judge-row" v-show="item.judgeResult">
                            <div
                                :class="[
                                    'row-fields',
                                    'fields-title',
                                    item.passed ? 'color-green' : 'color-red',
                                ]"
                            >
                                判定输出:
                            </div>
                            <div
                                :class="[
                                    'row-fields',
                                    'pre-wrap',
                                    item.passed ? 'color-green' : 'color-red',
                                ]"
                                v-text="item.judgeResult"
                            ></div>
                        </div>
                        <div class="judge-row" v-show="!item.passed">
                            <div class="row-fields fields-title color-blue">
                                正确输出:
                            </div>
                            <div
                                class="row-fields color-blue pre-wrap"
                                v-text="item.answer"
                            ></div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <div class="jx-main-content">
                        <div class="jx-content-tips">
                            <img
                                src="./../../../assets/images/index_no_data.png"
                            />
                            <p>暂无内容</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 待批改报告 -->
            <div class="report-content" v-show="activeIndex == 2">
                <!-- 在线版 -->
                <div
                    v-if="isReport == 1"
                    class="report-txt"
                    v-html="gradeReport"
                ></div>
                <!-- word版 -->
                <iframe
                    id="iframetest"
                    v-if="isReport == 2"
                    name="iframetest"
                    width="100%"
                    class="coursewareBox"
                    :src="
                        '../../../../static/generic/web/viewer.html?file=/tes/match-report/' +
                        courseId +
                        '/' +
                        taskId +
                        '/' +
                        matchNumber +
                        '/1/pdf/read'
                    "
                    frameborder="0"
                ></iframe>
                <!-- 暂无信息 -->
                <div v-if="isReport == 0">
                    <div class="jx-main-content">
                        <div class="jx-content-tips">
                            <img
                                src="./../../../assets/images/index_no_data.png"
                            />
                            <p>暂无内容</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 分析报告 -->
            <div class="report-content" v-show="activeIndex == 3">
                <iframe
                    v-if="analysePdfUrl"
                    id="iframetest"
                    name="iframetest"
                    width="100%"
                    class="coursewareBox"
                    :src="
                        `../../../../static/generic/web/viewer.html?file=/tes/match-report/${courseId}/${taskId}/${matchNumber}/2/pdf/read`
                    "
                    frameborder="0"
                ></iframe>
                <div v-else>
                    <div class="jx-main-content">
                        <div class="jx-content-tips">
                            <img
                                src="./../../../assets/images/index_no_data.png"
                            />
                            <p>暂无内容</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 去重报告 -->
            <div class="report-content" v-show="activeIndex == 4">
                <iframe
                    v-if="distinctPdfUrl"
                    id="iframetest"
                    name="iframetest"
                    width="100%"
                    class="coursewareBox"
                    :src="
                        `../../../../static/generic/web/viewer.html?file=/tes/match-report/${courseId}/${taskId}/${matchNumber}/3/pdf/read`
                    "
                    frameborder="0"
                ></iframe>
                <div v-else>
                    <div class="jx-main-content">
                        <div class="jx-content-tips">
                            <img
                                src="./../../../assets/images/index_no_data.png"
                            />
                            <p>暂无内容</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 参考答案 -->
        <el-dialog
            v-dialogDrag
            title="参考答案"
            :modal="false"
            :close-on-click-modal="false"
            :visible.sync="dialogNotesDrag"
            class="box"
        >
            <div v-if="answer != ''" class="answer-txt" v-html="answer"></div>
            <div v-else>
                <div class="jx-main-content">
                    <div class="jx-content-tips">
                        <img src="./../../../assets/images/index_no_data.png" />
                        <p>暂无内容</p>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 任务手册 -->
        <el-dialog
            v-dialogDrag
            title="任务手册"
            :modal="false"
            :close-on-click-modal="false"
            :visible.sync="dialogManualDrag"
            class="box"
        >
            <div
                v-if="manualContent != ''"
                class="answer-txt"
                v-html="manualContent"
            ></div>
            <div v-else>
                <div class="jx-main-content">
                    <div class="jx-content-tips">
                        <img src="./../../../assets/images/index_no_data.png" />
                        <p>暂无内容</p>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import ReportNav from "./ReportNav.vue";
import mavonEditor from "@/components/mavonEditor";
import {
    getOnesPlayerReport,
    submitResultsForApproval,
    getTaskAndAnswerInfoCP,
    getPlayerJudgeResultApi,
} from "@/api/competitionPlatform";
import { importPdf } from "@/api/importClass";
export default {
    name: "ReportDetails",
    components: {
        ReportNav,
        mavonEditor,
    },
    data() {
        return {
            distinctPdfUrl:"",
            analysePdfUrl:"",
            //批改完提交的data数据
            formData: {
                courseId: 0, //竞赛ID
                taskId: 0, //任务id
                matchNumber: 0, //赛号
                score: 0, //手动分数
            },
            // 参考答案
            answer: "",
            //传给nav的队伍信息
            websockMsg: { task: "我是任务", team: "我是队伍" },
            // 两个请求后台的参数，从本地缓存拿
            courseId: 0, //课程id
            taskId: 0, //任务id
            // 参赛人员相关信息 start
            //手动打分最大值
            reviewScore: 0,
            //任务最大分值
            taskScore: 0,
            // 待批改报告
            gradeReport: "",
            //参赛人员编号
            matchNumber: 0,
            //判定得分
            juegeScore: 0,
            //下一组编号
            nextMatchNumber: "",
            // 上一组编号
            previewMatchNumber: "",
            // pdf报告链接（不一定有）
            pdfUrl: "",
            // word报告链接（不一定有）
            docUrl: "",
            //word报告名称（不一定有）
            docName: "",
            // 参赛人员相关信息 end

            //开关 start
            //参考答案弹窗开关
            dialogNotesDrag: false,
            // 是否显示报告,0没有报告，1在线报告，2 word报告
            isReport: 0,
            //开关 end
            // 选手判定结果
            judgeResultData: [],
            // 导航索引
            activeIndex: 3,
            // 手册内容
            manualContent: "",
            // 手册弹窗开关
            dialogManualDrag: false,
        };
    },
    created() {
        this.courseId = this.$localstorage.getLocalStorage("setCourseId");
        this.taskId = this.$route.query.taskId;
        this.matchNumber = this.$route.query.matchNumber;
        // 初始化获取报告和答案
        this.init();
        //设置当前队伍编号
        this.formData.matchNumber = this.$route.query.matchNumber;
        // 队伍名称
        this.websockMsg.team = this.$route.query.matchNumber;
        this.websockMsg.task =
            this.$localstorage.getLocalStorage("NameOfApprovalTask");
    },
    computed: {
        // 计算总分
        totleScore() {
            if (this.formData.score != "") {
                return (
                    parseFloat(this.formData.score) +
                    parseFloat(this.juegeScore)
                );
            } else {
                return parseFloat(this.juegeScore);
            }
        },
    },
    methods: {
        //初始设置
        init() {
            //获取参考答案
            getTaskAndAnswerInfoCP(this.courseId, this.taskId)
                .then((res) => {
                    if (res.code == 200) {
                        if (
                            res.data.laboratoryManual.displayVersion.length >
                                0 &&
                            res.data.laboratoryManual.displayVersion[0]
                                .htmlContent != undefined &&
                            res.data.laboratoryManual.displayVersion[0]
                                .htmlContent != ""
                        ) {
                            this.answer =
                                res.data.laboratoryManual.displayVersion[0].htmlContent;
                        }
                        if (
                            res.data.laboratoryTarget.displayVersion.length >
                                0 &&
                            res.data.laboratoryTarget.displayVersion[0]
                                .htmlContent != undefined &&
                            res.data.laboratoryTarget.displayVersion[0]
                                .htmlContent != ""
                        ) {
                            this.manualContent =
                                res.data.laboratoryTarget.displayVersion[0].htmlContent;
                        }
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            this.getPlayerJudgeResultFn();
            this.getOnesPlayerReportFn();
        },
        // 切换导航
        changeNav(index) {
            this.activeIndex = index;
        },
        // 获取选手报告
        getOnesPlayerReportFn() {
            //获取选手报告
            getOnesPlayerReport(
                this.courseId,
                this.taskId,
                this.matchNumber
            ).then((res) => {
                if (res.code == 200) {
                    this.distinctPdfUrl = res.data.distinctPdfUrl;
                    this.analysePdfUrl = res.data.analysePdfUrl;
                    //参赛人员在线报告
                    if (
                        res.data.htmlContent != undefined &&
                        res.data.htmlContent != ""
                    ) {
                        this.gradeReport = res.data.htmlContent;
                        this.isReport = 1;
                    }
                    // 参赛人员word报告
                    if (res.data.docUrl != undefined && res.data.docUrl != "") {
                        this.docUrl = res.data.docUrl;
                        this.docName = res.data.docName;
                    }
                    if (res.data.pdfUrl != undefined && res.data.pdfUrl != "") {
                        this.pdfUrl = res.data.pdfUrl;
                        this.isReport = 2;
                    }
                    // 系统判定得分
                    if (res.data.systemScore) {
                        this.juegeScore = res.data.systemScore;
                    }
                    // 手动给分初始值
                    if (res.data.manualScore != undefined) {
                        this.formData.score = res.data.manualScore;
                    }
                    // taskScore-reviewScore
                    this.reviewScore = res.data.reviewScore;
                    this.taskScore = res.data.taskScore;
                    //下一份赛号
                    if (res.data.nextMatchNumber) {
                        this.nextMatchNumber = res.data.nextMatchNumber;
                    } else {
                        this.nextMatchNumber = "";
                    }
                    //上一份赛号
                    if (res.data.previewMatchNumber) {
                        this.previewMatchNumber = res.data.previewMatchNumber;
                    } else {
                        this.previewMatchNumber = "";
                    }
                    if (res.data.pdfUrl || res.data.docUrl) {
                        this.pdfUrl = res.data.pdfUrl;
                        this.docUrl = res.data.docUrl;
                    }
                    // "docUrl": "http://172.16.100.230:10002/resources/matchReport/4.docx", //word地址 （不知道页面是否有下载按钮，所以增加了这个字段）
                    // "nextMatchNumber": "456", //下一份赛号
                    // "previewMatchNumber": "123", //上一份赛号
                    // "htmlContent": "html的内容", //html内容
                    // "systemScore": 0, //判定得分
                    // "team": true //是否是团队  true：团队赛 false：个人赛
                    // } //返回数据
                }
            });
        },
        // 获取判定结果
        getPlayerJudgeResultFn() {
            const { courseId, taskId, matchNumber } = this;
            const params = {
                courseId,
                taskId,
                matchNumber,
            };
            getPlayerJudgeResultApi(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.judgeResultData = res.data;
                    }
                })
                .catch(() => {});
        },
        //下载word报告
        pdfLookLook() {
            this.$downloadfile.download(this.docUrl, this.docName);
        },
        //点击提交
        submit() {
            if (
                this.formData.score > this.taskScore ||
                this.formData.score < 0
            ) {
                return this.$alert("所给分数有误，请重新给分");
            }
            if (this.taskScore < this.totleScore) {
                return this.$alert(
                    "当前任务所给分数超过任务分数最大值（" +
                        this.taskScore +
                        "分），请重新给分"
                );
            }
            this.formData.courseId = this.courseId;
            this.formData.taskId = this.taskId;
            //flag=1提交当前得分 flag=2切换到下一份报告 flag=3切换到上一份报告
            submitResultsForApproval(this.formData).then((res) => {
                if (res.code == 200) {
                    this.$message({
                        message: "提交成功",
                        type: "success",
                    });
                }
            });
        },
        // 切换报告，上一份还是下一份
        changeReport(flag) {
            // 下一份
            if (flag == "next") {
                if (this.nextMatchNumber == "") {
                    return this.$alert("当前已是最后一份报告");
                }
                this.$router.push({
                    path: "/ReportDetails",
                    query: {
                        matchNumber: this.nextMatchNumber,
                        taskId: this.taskId,
                    },
                });
                location.reload();
            } else {
                if (this.previewMatchNumber == "") {
                    return this.$alert("当前已是第一份报告");
                }
                // 上一份
                this.$router.push({
                    path: "/ReportDetails",
                    query: {
                        matchNumber: this.previewMatchNumber,
                        taskId: this.taskId,
                    },
                });
                location.reload();
            }
        },
        //输入分数验证
        inputjudge() {
            this.formData.score = this.formData.score.replace(/[^0-9]/g, "");
            if (this.totleScore > this.taskScore) {
                this.formData.score = this.taskScore - this.juegeScore;
            }
        },
        //返回上一级
        goToLastPage() {
            // this.$router.go(-1)
            this.$router.push({
                path: "/ApprovalPage",
                query: { taskId: this.taskId },
            });
        },
    },
};
</script>
<style lang="scss">
#ReportDetails {
    //input宽度调整
    .top-left {
        .el-input {
            width: 55px;
            .el-input__inner {
                width: 55px;
            }
        }
    }
    // 参考答案拖拽样式
    .el-dialog__wrapper {
        width: 800px;

        height: 550px;
        top: 15%;
        left: calc((100vw - 800px) / 2);
        .el-dialog {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            .el-dialog__body {
                height: 414px;
                overflow: auto;
            }
        }
    }
    //报告和答案行间距调整
    .report-txt,
    .answer-txt {
        * {
            line-height: 3;
        }
        img {
            max-width: 100%;
        }
    }
}
</style>
<style lang="scss" scoped>
#ReportDetails {
    // 普通样式
    body {
        background-color: #f8f8f8;
    }
    .report-main,
    .report-top {
        width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
        .top-button {
            border: 1px solid #1277eb;
            height: 32px;
            width: 94px;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            color: #1277eb;
            cursor: pointer;
            border-radius: 20px;
            padding: 0 16px;
            font-size: 14px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0 5px 0 5px;
            &:hover {
                background-color: #1277eb;
                color: white;
            }
        }
        .disablebutton {
            color: #555;
            border-color: #555;
            &:hover {
                background-color: transparent;
                color: #555;
            }
        }
    }
    .report-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
        background-color: #fff;
        padding: 0 30px 0 30px;
        margin-top: 5px;
        margin-bottom: 10px;
        .top-left {
            display: flex;
            align-items: center;
            span {
                margin-right: 10px;
            }
            span:nth-child(1) {
                margin-right: 10px;
            }
            span:nth-child(2) {
                width: 50px;
                text-align: center;
                margin-right: 10px;
            }
        }
    }
    .report-main {
        background-color: #fff;
        display: flex;
        justify-content: flex-end;
        flex-flow: row wrap;
        padding: 20px 30px 20px 30px;
        .report-btn {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2px solid #eee;
            .btn-nav {
                display: flex;
                align-items: center;
                .nav-item {
                    height: 30px;
                    cursor: pointer;
                    line-height: 30px;
                    margin-right: 25px;
                    transition: all 0.5s;
                    position: relative;
                    user-select: none;
                    &:hover {
                        color: #1277eb;
                    }
                    &.active {
                        color: #1277eb;
                        &::after {
                            content: "";
                            width: 100%;
                            height: 2px;
                            background: #1277eb;
                            position: absolute;
                            bottom: -2px;
                            left: 0px;
                        }
                    }
                }
            }
            .btn-menu {
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
            .model-download {
                cursor: pointer;
                font-size: 14px;
                color: #1277eb;
                margin-right: 20px;
                i {
                    height: 19px;
                    overflow: hidden;
                }
                &:hover {
                    color: #5555ff;
                }
            }
        }
        .report-content {
            width: 100%;
            padding-top: 20px;
            min-height: 750px;
            .report-txt {
                width: 100%;
            }
        }
        .judge-result {
            width: 100%;
            padding-top: 20px;
            min-height: 750px;
            .judge-item {
                width: 100%;
                margin-bottom: 30px;
                .judge-row {
                    display: flex;
                    align-items: flex-start;
                    justify-content: flex-start;
                    margin-bottom: 10px;
                    .row-fields {
                        line-height: 1.5;
                        &.fields-title {
                            font-weight: bold;
                            color: #333333;
                            width: 80px;
                        }
                        &.color-red {
                            color: red;
                        }
                        &.color-green {
                            color: #008000;
                        }
                        &.color-blue {
                            color: #1277eb;
                        }
                        &.pre-wrap {
                            white-space: pre-wrap;
                        }
                    }
                    .passed-item {
                        display: flex;
                        align-items: center;
                        color: #008000;
                        margin-left: 20px;
                        height: 21px;
                        p {
                            height: 13px;
                            width: 13px;
                            text-align: center;
                            line-height: 13px;
                            color: #fff;
                            background-color: #008000;
                            border-radius: 3px;
                            margin-right: 3px;
                        }
                    }
                    .passed-wrong{
                        color:red;
                        p{
                            background-color: red;
                        }
                    }
                }
            }
        }
    }
    .box {
        // left: 30% !important;
        // top: 15% !important;
        // transform: translate(-50%,-50%);
        box-shadow: 1px 1px 10px #888888 !important;
    }
    .answer-txt {
        background-color: white;
    }
    // 暂无内容
    .jx-main-content {
        background: #fff;
        .jx-content-tips {
            text-align: center;
            margin-top: 100px;
        }
    }
    .jx-main-content {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        .jx-content-tips {
            text-align: center;
            margin-top: 100px;
        }
        p {
            line-height: 24px;
        }
        img {
            max-width: 100%;
        }
    }
    #iframetest {
        height: 700px;
    }
    .coursewareBox {
        overflow-y: hidden;
    }
}
</style>


